<template>
   <div>
     <Search 
     @search="queryModel.page=1;getGoods()" 
     v-model="queryModel.query"
     @click="model={};$refs.d.show()"
     >添加商品</Search>
     <MyTable 
     rowKey="goods_id"
     v-model="queryModel" 
     :loading="queryLoading"
     :total="total"
     :cols="cols"
     :data="list"
     @change="getList"
     >
     <template v-slot:time="{row:{add_time}}">
         {{new Date(add_time*1000).format()}}
     </template>
     <template v-slot:action="{row}">
         <el-button class="el-icon-edit" type="primary" size="mini" @click="model={...row};$refs.d.show();"></el-button>
        <el-button class="el-icon-delete-solid" type="danger" size="mini"></el-button>
     </template>
     </MyTable>
     <!-- 添加编辑 -->
     <DF 
     lw="80px" 
     :title="title+'商品'" 
     :opts="opts" 
     v-model="model" 
     @confirm="confirm"
     ref="d">
         
     </DF>
   </div>
</template>

<script>
import { pageMixins } from '@/mixins/baseMixins';
import {getGoodsList,addGoods,updateGoods} from 'api/goods';
    export default {
        mixins:[pageMixins],
        name:"goods",
        data() {
            return {
                /**
                * 添加编辑模型
                */
                model:{},
                /**
                 * 列
                 */
                cols: [
                    {
                        title:"#",
                        type:'index'
                    },
                    {
                        title:"商品名称",
                        name:'goods_name'
                    },
                    {
                        title:"商品价格（元）",
                        name:'goods_price',
                        width:'100'
                    },
                    {
                        title:"商品重量",
                        name:'goods_weight',
                         width:'100'
                    },
                    {
                        title:"创建时间",
                        slot:'time',
                         width:'160'
                    },
                    {
                        title:"操作",
                        align:"center",
                        slot:'action',
                        width:'160',
                    },
                ]
            }
        },
        created () {
            this.getList();
        },
        methods: {
            /**
             * 提交
             */
            async confirm(){
                const d=this.$refs.d
              try {
                this.model.pics= 
                this.model.pics?.map(c=>({
                    pic:c.response.data.tmp_path,
                }))??[];
                d.start();
                await (this.model.goods_id?updateGoods:addGoods)(this.model);
                this.$m.success(this.title+"成功")
                this.getList();
                d.hide();
              } catch (error) {
                console.log(error);
              }
              d.stop();
            },
            /**
             * 获取商品列表
             */
           async getList() {
                try {
                    this.queryLoading=true;
                    const {total,goods}=await getGoodsList(this.queryModel);
                    this.list=goods;
                    this.total=total;
                } catch (error) {}
                    this.queryLoading=false;
            } 
        },
        computed: {
            /**
             * 表单配置项
             */
            opts(){
              return{
                 goods_name:{
                    title:"商品名称",
                    required:true,
                    max:20,
                },
                goods_price:{
                    title:"商品价格",
                    type:'number',
                    required:true,
                },
                goods_number:{
                    title:"商品数量",
                    type:'number',
                    required:true,
                },
                goods_weight:{
                    title:"商品重量",
                    type:'number',
                    required:true,
                },
               ...(this.model.goods_id?{}:{
                 pics:{
                    title:"商品图片",
                    tag:"upload",
                    url:"/shi/upload",
                    headers:{
                        Authorization:this.$store.getters.token,
                    },
                },
               })
              };
            },
            /**
             * 标题
             */
            title() {
                return this.model.goods_id?"修改":"添加";
            }
        },
    };
</script>

<style lang="scss" scoped>

</style>